<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>电气数据监控 (uPlot)</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@1.6.23/dist/uPlot.min.css">
    <style>
        #chart {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>

    <script src="https://cdn.jsdelivr.net/npm/uplot@1.6.23/dist/uPlot.iife.min.js"></script>
    <script>
        // 生成模拟数据
        function generateData(pointCount) {
            const now = Date.now();
            const voltage = [];
            const current = [];
            const timestamps = [];

            let v = 220;
            let a = 10;

            for (let i = 0; i < pointCount; i++) {
                const time = now - (pointCount - i) * 1000;
                v = 220 + Math.sin(i / 100) * 22;
                a = 10 + Math.sin(i / 50) * 3;

                timestamps.push(time / 1000); // uPlot需要秒级时间戳
                voltage.push(Number(v.toFixed(2)));
                current.push(Number(a.toFixed(2)));
            }

            return [timestamps, voltage, current];
        }

        // 准备数据 (10万点)
        const data = [
    [
        1748312089.946,
        1748312090.946,
        1748312091.946,
        1748312092.946,
        1748312093.946,
        1748312094.946,
        1748312095.946,
        1748312096.946,
        1748312097.946,
        1748312098.946
    ],
    [
        0.000220,
        0.00022022,
        null,
        0.00066,
        0.00022088,
        0.0002211,
        0.00022132,
        0.00054,
        0.00022176,
        0.00022198
    ],
    [
        0.00014,
        0.00001006,
        null,
        0.0001018,
        0.0001024,
        null,
        null,
        0.0001042,
        0.00012,
        0.0001054
    ]
]
        console.log("=======",data);
        // 配置选项
        const opts = {
            title: "电气数据监控",
            width: document.getElementById('chart').offsetWidth,
            height: 600,
            scales: {
                x: {
                    time: true
                },
                // "电压(V)": {
                //     range: [180, 260]
                // },
                // "电流(A)": {
                //     range: [8, 15]
                // }
            },
            series: [
                {
                    label: "时间",
                    value: (self, rawValue) => {
                        return new Date(rawValue * 1000).toLocaleString();
                    }
                },
                {
                    label: "电压",
                    stroke: "red",
                    scale: "电压(V)",
                    value: (self, value) => value + " V"
                },
                {
                    label: "电流",
                    stroke: "blue",
                    scale: "电流(A)",
                    value: (self, value) => value + " A"
                }
            ],
            axes: [
                {
                    scale: "x",
                    values: (self, splits) => {
                        return splits.map(t => {
                            const d = new Date(t * 1000);
                            return d.toLocaleTimeString();
                        });
                    }
                },
                {
                    scale: "电压(V)",
                    label: "电压 (V)",
                    values: (self, splits) => splits.map(v => v + " Vss")
                },
                {
                    side: 1,
                    scale: "电流(A)",
                    label: "电流 (A)",
                    values: (self, splits) => splits.map(v => v + " Ass")
                }
            ]
        };

        // 创建图表
        const uplot = new uPlot(opts, data, document.getElementById('chart'));

        // 响应式调整大小
        window.addEventListener('resize', () => {
            uplot.setSize({
                width: document.getElementById('chart').offsetWidth,
                height: 600
            });
        });
    </script>
</body>

</html>